<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom-结构</title>
    <style>
        .container {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div id="container" class="container">
    <div id="box">innerBox</div>
</div>
<button id="btnAdd">添加</button>
<button id="btnRemove">移除</button>
<button id="btnBefore">向前添加</button>
<button id="btnReplace">替换</button>
</body>
<script>
    /*  var container = document.getElementById('container');

     // container.innerHTML='<div>helo</div>';
      var innerBox = document.createElement('div');
      innerBox.innerText ='inner';
      var innerBox2 = document.createElement('div');
      innerBox2.innerText ='inner2';

      container.appendChild(innerBox);
      container.appendChild(innerBox2);
      container.removeChild(innerBox);*/


    var btnRemove = document.getElementById('btnRemove');
    btnRemove.onclick = function () {

        var container = document.getElementById('container');// 父容器
        var innderBox = document.getElementById('box');//将要被操作的元素

        container.removeChild(innderBox);

    }

    var btnBefore = document.getElementById('btnBefore');
    btnBefore.onclick = function () {

        var container = document.getElementById('container');// 父容器
        var newBox = document.createElement('div');//将要被操作的元素
        var innderBox = document.getElementById('box');
        newBox.innerText = "newBox";
        container.insertBefore(newBox,innderBox)
    }

    var btnReplace = document.getElementById('btnReplace');
    btnReplace.onclick = function () {

        var container = document.getElementById('container');// 父容器
        var newBox = document.createElement('div');//将要被操作的元素
        var innderBox = document.getElementById('box');
        newBox.innerText = "newBox";
        container.replaceChild(newBox,innderBox);
    }


</script>
</html>